<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>编程式导航栏</title>
  <script src="../js/vue.js"></script>
  <script src="../js/vue_router.js"></script>
</head>
<!-- 
  声明式导航
    通过点击链接实现导航的方式，叫做声明式导航
    例如:普通网页中的<a></a>链接或<router-link></router-link>
  
  编程式导航
    通过js的API实现的导航方式
    常见的编程式导航API
      this.$router.push("hash地址");
      参数规则:
        字符串
        router.push("/home");
        对象
        router.push({path:"/home"});
        命名的路由(传递参数)
        router.push({name:"/home",params:{id:1}});
        带查询参数,变成 /home?id=1
        router.push({path:"/home",query:{id:1}});

      this.$router.go(n) 可以实现前进和后退的，n=1表示前进，n=-1表示后退
-->

<body>
  <div id="app">
    <router-link to="/me">push的方法的跳转</router-link>
    <router-link to="/you">go(n)的编程式内容</router-link>

    <router-view />
  </div>
</body>
<script>
  "use strict";
  const me = {
    template: `
    <div>
      <h1>内容是我自己的了</h1>  
      <input type="button" value="点击我实现跳转" @click="goyou">
    </div>`,
    methods: {
      goyou() {
        this.$router.push("/you");
      }
    }
  };

  const you = {
    template: `
    <div>
      <h2 style="color:red;">使用go(n)这个方法吧</h2>
      <button @click="goback">go(n)</button>
    </div>`,
    methods: {
      goback() {
        this.$router.go(-1);
      }
    }
  };

  const router = new VueRouter({
    routes: [{
      path: "/",
      redirect: "/me"
    }, {
      path: "/me",
      component: me
    }, {
      path: "/you",
      component: you
    }]
  });

  const vm = new Vue({
    el: "#app",
    data() {
      return {};
    },
    methods: {},
    router
  });
</script>

</html>